
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
} from '@ant-design/icons';
import { Layout, Menu, Input, Button } from 'antd';
import React, { useState} from 'react';
import './App.css'
const { Header, Sider, Content } = Layout;

const App = () => {
  const [collapsed, setCollapsed] = useState(false);
  const [item, setItem] = useState([
    {
      label: '菜单项一', key: 'item-1',
      children: [
        { label: '子菜单项1-1', key: 'submenu-item-1-1' },
        { label: '子菜单项1-2', key: 'submenu-item-1-2' }
      ],
    },
    {
      label: '菜单项二', key: 'item-2',
      children: [
        { label: '子菜单项2-1', key: 'submenu-item-2-1' },
        { label: '子菜单项2-2', key: 'submenu-item-2-2' }
      ],
    },
  ]);
  const [keypath, setKeypath] = useState([]);
  const [inpValue, setInpvalue] = useState('');
  const btnMenu = ({ keyPath }) => {
    item.map((item) => {
      item.children.map((keys) => {
        if (keys.key === keyPath[0]) {
          setInpvalue(keys.label)
        }
      })
    })
    setKeypath(keyPath);
  }
  const changeInp = () => {
    item.map((item) => {
      if (item.key === keypath[1]) {
        item.children.map((childItem) => {
          if (childItem.key === keypath[0]) {
            childItem.label = inpValue
          }
        })
      }
    })
    setItem([...item]);
  }
  return (
    <Layout>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="logo" />
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['1']}
          items={item}
          onClick={({ keyPath }) => btnMenu({ keyPath })}
        />
      </Sider>
      <Layout className="site-layout">
        <Header
          className="site-layout-background"
          style={{
            padding: 0,
          }}
        >
          {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
            className: 'trigger',
            onClick: () => setCollapsed(!collapsed),
          })}
        </Header>
        <Content
          className="site-layout-background"
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
          }}
        >
          <div className='inpBox'>
            <Input placeholder="Basic usage" value={inpValue} onChange={(e) => setInpvalue(e.target.value)} />
            <Button type="primary" onClick={() => changeInp()} >保存</Button>
          </div>
        </Content>
      </Layout>
    </Layout>
  );
};

export default App;